import { Row, Col, Card, Statistic, Table } from 'antd'
import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons'
import ReactECharts from 'echarts-for-react'
import './index.scss'

const ReadingStatistics = () => {
  // 统计卡片数据
  const statsData = [
    {
      title: '总阅读人数',
      value: 12256,
      trend: 206,
      trendType: 'up',
      chartData: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330, 310, 250, 280, 320, 350, 280, 260, 290]
    },
    {
      title: '阅读时长',
      value: 1138,
      suffix: '小时',
      trend: 405,
      trendType: 'up',
      chartData: [50, 80, 120, 90, 150, 180, 200, 160, 190, 220, 250, 280, 240, 260, 300, 320, 280, 310, 340, 360]
    },
    {
      title: '阅读完成率',
      value: 45.92,
      suffix: '%',
      trend: 1.12,
      trendType: 'up',
      chartData: [180, 192, 201, 234, 190, 330, 310, 282, 291, 334, 390, 430, 410, 350, 380, 420, 450, 380, 360, 390]
    },
    {
      title: '收藏总量',
      value: 3256,
      trend: 588,
      trendType: 'down',
      chartData: [280, 292, 301, 334, 290, 430, 410, 382, 391, 434, 490, 530, 510, 450, 480, 520, 550, 480, 460, 490]
    }
  ]

  // 阅读趋势数据
  const readingTrendData = [
    { time: '0:00', type: '科幻小说', value: 2100 },
    { time: '0:00', type: '文学小说', value: 1200 },
    { time: '0:00', type: '历史人文', value: 800 },
    { time: '2:00', type: '科幻小说', value: 2300 },
    { time: '2:00', type: '文学小说', value: 1400 },
    { time: '2:00', type: '历史人文', value: 900 },
    { time: '4:00', type: '科幻小说', value: 1300 },
    { time: '4:00', type: '文学小说', value: 800 },
    { time: '4:00', type: '历史人文', value: 500 },
    { time: '6:00', type: '科幻小说', value: 2400 },
    { time: '6:00', type: '文学小说', value: 1500 },
    { time: '6:00', type: '历史人文', value: 1000 },
    { time: '8:00', type: '科幻小说', value: 1900 },
    { time: '8:00', type: '文学小说', value: 1100 },
    { time: '8:00', type: '历史人文', value: 700 },
    { time: '10:00', type: '科幻小说', value: 2200 },
    { time: '10:00', type: '文学小说', value: 1300 },
    { time: '10:00', type: '历史人文', value: 850 },
    { time: '12:00', type: '科幻小说', value: 2800 },
    { time: '12:00', type: '文学小说', value: 1800 },
    { time: '12:00', type: '历史人文', value: 334 },
    { time: '14:00', type: '科幻小说', value: 600 },
    { time: '14:00', type: '文学小说', value: 400 },
    { time: '14:00', type: '历史人文', value: 334 },
    { time: '16:00', type: '科幻小说', value: 1800 },
    { time: '16:00', type: '文学小说', value: 1000 },
    { time: '16:00', type: '历史人文', value: 600 },
    { time: '18:00', type: '科幻小说', value: 2100 },
    { time: '18:00', type: '文学小说', value: 1200 },
    { time: '18:00', type: '历史人文', value: 800 },
    { time: '20:00', type: '科幻小说', value: 2400 },
    { time: '20:00', type: '文学小说', value: 1400 },
    { time: '20:00', type: '历史人文', value: 900 },
    { time: '22:00', type: '科幻小说', value: 1500 },
    { time: '22:00', type: '文学小说', value: 900 },
    { time: '22:00', type: '历史人文', value: 600 }
  ]

  // 热门图书榜单数据
  const bookRankData = [
    { rank: 1, book: '三体：地球往事', readCount: 1500, readers: 32214 },
    { rank: 2, book: '活着', readCount: 2100, readers: 22145 },
    { rank: 3, book: '百年孤独', readCount: 1800, readers: 23567 },
    { rank: 4, book: '人类简史', readCount: 1743, readers: 12586 },
    { rank: 5, book: '平凡的世界', readCount: 1421, readers: 8356 },
    { rank: 6, book: '红楼梦', readCount: 1743, readers: 11586 },
    { rank: 7, book: '围城', readCount: 1421, readers: 10356 }
  ]

  // 柱状图配置
  const getColumnOption = () => {
    const times = [...new Set(readingTrendData.map(item => item.time))]
    const types = [...new Set(readingTrendData.map(item => item.type))]
    
    return {
      color: ['#5B8FF9', '#5AD8A6', '#5D7092'],
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' }
      },
      legend: {
        data: types,
        bottom: 0
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '10%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: times
      },
      yAxis: {
        type: 'value'
      },
      series: types.map(type => ({
        name: type,
        type: 'bar',
        data: times.map(time => {
          const item = readingTrendData.find(d => d.time === time && d.type === type)
          return item ? item.value : 0
        }),
        label: {
          show: true,
          position: 'top',
          formatter: (params) => params.value > 1000 ? params.value : ''
        },
        itemStyle: {
          borderRadius: [4, 4, 0, 0]
        }
      }))
    }
  }

  // 阅读时段比例数据
  const timePeriodData = [
    { time: '04:00', type: '科幻小说', value: 40 },
    { time: '04:00', type: '文学小说', value: 60 },
    { time: '04:00', type: '历史人文', value: 25 },
    { time: '05:00', type: '科幻小说', value: 45 },
    { time: '05:00', type: '文学小说', value: 55 },
    { time: '05:00', type: '历史人文', value: 30 },
    { time: '06:00', type: '科幻小说', value: 50 },
    { time: '06:00', type: '文学小说', value: 65 },
    { time: '06:00', type: '历史人文', value: 35 },
    { time: '07:00', type: '科幻小说', value: 55 },
    { time: '07:00', type: '文学小说', value: 50 },
    { time: '07:00', type: '历史人文', value: 30 },
    { time: '08:00', type: '科幻小说', value: 60 },
    { time: '08:00', type: '文学小说', value: 85 },
    { time: '08:00', type: '历史人文', value: 35 },
    { time: '09:00', type: '科幻小说', value: 50 },
    { time: '09:00', type: '文学小说', value: 65 },
    { time: '09:00', type: '历史人文', value: 30 },
    { time: '10:00', type: '科幻小说', value: 55 },
    { time: '10:00', type: '文学小说', value: 50 },
    { time: '10:00', type: '历史人文', value: 25 },
    { time: '11:00', type: '科幻小说', value: 70 },
    { time: '11:00', type: '文学小说', value: 75 },
    { time: '11:00', type: '历史人文', value: 35 },
    { time: '12:00', type: '科幻小说', value: 65 },
    { time: '12:00', type: '文学小说', value: 60 },
    { time: '12:00', type: '历史人文', value: 30 },
    { time: '13:00', type: '科幻小说', value: 60 },
    { time: '13:00', type: '文学小说', value: 70 },
    { time: '13:00', type: '历史人文', value: 25 },
    { time: '14:00', type: '科幻小说', value: 55 },
    { time: '14:00', type: '文学小说', value: 65 },
    { time: '14:00', type: '历史人文', value: 20 },
  ]

  // 时段比例图配置
  const getTimePeriodOption = () => {
    const times = [...new Set(timePeriodData.map(item => item.time))]
    const types = [...new Set(timePeriodData.map(item => item.type))]
    
    return {
      color: ['#5AD8A6', '#5B8FF9', '#5D7092'],
      tooltip: {
        trigger: 'axis',
        formatter: (params) => {
          let result = params[0].name + '<br/>'
          params.forEach(item => {
            result += item.marker + item.seriesName + ': ' + item.value + '%<br/>'
          })
          return result
        }
      },
      legend: {
        data: types,
        bottom: 0
      },
      grid: {
        left: '3%',
        right: '15%',
        bottom: '10%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: times,
        boundaryGap: false
      },
      yAxis: {
        type: 'value',
        max: 100,
        axisLabel: {
          formatter: '{value}%'
        }
      },
      series: types.map((type, index) => ({
        name: type,
        type: 'line',
        smooth: true,
        lineStyle: { width: 3 },
        showSymbol: false,
        data: times.map(time => {
          const item = timePeriodData.find(d => d.time === time && d.type === type)
          return item ? item.value : 0
        })
      }))
    }
  }

  // 图书排行表格列
  const columns = [
    {
      title: '排名',
      dataIndex: 'rank',
      key: 'rank',
      width: 80,
      align: 'center',
      render: (rank) => {
        if (rank <= 3) {
          const colors = ['#FFD700', '#C0C0C0', '#CD7F32']
          return (
            <span style={{ 
              color: colors[rank - 1], 
              fontWeight: 'bold',
              fontSize: '16px'
            }}>
              {rank}
            </span>
          )
        }
        return rank
      }
    },
    {
      title: '图书名称',
      dataIndex: 'book',
      key: 'book',
    },
    {
      title: '阅读次数',
      dataIndex: 'readCount',
      key: 'readCount',
      align: 'right',
      render: (text) => text.toLocaleString()
    },
    {
      title: '读者人数',
      dataIndex: 'readers',
      key: 'readers',
      align: 'right',
      render: (text) => text.toLocaleString()
    }
  ]

  return (
    <div className="reading-statistics-container">
      {/* 统计卡片 */}
      <Row gutter={[16, 16]}>
        {statsData.map((stat, index) => (
          <Col xs={24} sm={12} lg={6} key={index}>
            <Card className="stat-card">
              <div className="stat-header">
                <span className="stat-title">{stat.title}</span>
              </div>
              <div className="stat-content">
                <div className="stat-main">
                  <div className="stat-value">{stat.value.toLocaleString()}{stat.suffix || ''}</div>
                  <div className={`stat-trend ${stat.trendType}`}>
                    较昨天 {stat.trend} {stat.trendType === 'up' ? <ArrowUpOutlined /> : <ArrowDownOutlined />}
                  </div>
                </div>
                <div className="stat-chart">
                  <ReactECharts
                    option={{
                      xAxis: { show: false, type: 'category' },
                      yAxis: { show: false, type: 'value' },
                      series: [{
                        data: stat.chartData,
                        type: 'line',
                        smooth: true,
                        showSymbol: false,
                        lineStyle: {
                          color: stat.trendType === 'up' ? '#1890ff' : '#ff4d4f',
                          width: 2
                        }
                      }],
                      grid: { left: 0, right: 0, top: 0, bottom: 0 }
                    }}
                    style={{ height: '60px' }}
                    opts={{ renderer: 'svg' }}
                  />
                </div>
              </div>
            </Card>
          </Col>
        ))}
      </Row>

      {/* 内容发布趋势和热门作者 */}
      <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
        <Col xs={24} lg={16}>
          <Card 
            title="阅读趋势分析" 
            className="chart-card"
            extra={<a href="#more">查看更多</a>}
          >
            <ReactECharts option={getColumnOption()} style={{ height: '400px' }} />
          </Card>
        </Col>
        <Col xs={24} lg={8}>
          <Card 
            title="热门图书榜单" 
            className="rank-card"
            extra={<a href="#more">查看更多</a>}
          >
            <Table
              columns={columns}
              dataSource={bookRankData}
              pagination={false}
              size="small"
              rowKey="rank"
            />
          </Card>
        </Col>
      </Row>

      {/* 阅读时段比例分析 */}
      <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
        <Col xs={24}>
          <Card 
            title="阅读时段比例分析" 
            className="chart-card"
          >
            <ReactECharts option={getTimePeriodOption()} style={{ height: '400px' }} />
          </Card>
        </Col>
      </Row>
    </div>
  )
}

export default ReadingStatistics
